import { View, Text, Image } from '@tarojs/components'
import { useState } from 'react'
import TabBar from '../../components/TabBar'
import './index.css'

const tabs = [
  { key: 'customer', label: '客服', icon: 'https://img.icons8.com/fluency/48/000000/customer-support.png', activeIcon: 'https://img.icons8.com/fluency/48/000000/customer-support.png' },
  { key: 'logistics', label: '物流', icon: 'https://img.icons8.com/fluency/48/000000/delivery.png' },
  { key: 'remind', label: '提醒', icon: 'https://img.icons8.com/fluency/48/000000/bell.png' },
  { key: 'coupon', label: '优惠', icon: 'https://img.icons8.com/fluency/48/000000/discount.png', badge: 1, desc: '26.18元京东购物无门槛券' },
  { key: 'interaction', label: '互动', icon: 'https://img.icons8.com/fluency/48/000000/chat.png', badge: 1 },
]

// 各tab的消息分组数据
const customerMessages = [
  {
    title: '',
    messages: [
      {
        id: '1',
        avatar: 'https://img2.baidu.com/it/u=123456789,123456789&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
        name: '京东客服',
        desc: '京东客服很高兴为您服务',
        time: '',
        unread: 0,
        official: true,
      },
    ],
  },
  {
    title: '一周前的消息',
    messages: [
      {
        id: '2',
        avatar: '',
        brandColor: '#1aad19',
        brandText: '绿联',
        name: '绿联（UGREEN）京东自营...',
        desc: '[卡片]',
        time: '2025/05/15',
        unread: 0,
      },
      {
        id: '3',
        avatar: '',
        brandColor: '#fff',
        brandText: '',
        brandImg: 'https://img.icons8.com/ios-filled/50/000000/mac-os.png',
        name: 'Apple产品京东自营旗舰店',
        desc: '感谢对京东Apple的支持。温馨提示：Apple产...',
        time: '2025/04/29',
        unread: 0,
      },
      
      {
        id: '4',
        avatar: '',
        brandColor: '#1976d2',
        brandText: 'KOVOL',
        name: '科沃（KOVOL）京东自营旗...',
        desc: '[卡片]',
        time: '2025/04/28',
        unread: 0,
      },
      {
        id: '5',
        avatar: '',
        brandColor: '#fff',
        brandText: '',
        brandImg: 'https://img.icons8.com/color/48/000000/lining.png',
        name: '李宁羽毛球京东自营旗舰店',
        desc: '~ 抱歉呢，本店目前不提供指定穿线磅数的服...',
        time: '2025/04/18',
        unread: 0,
      },
      
      {
        id: '6',
        avatar: '',
        brandColor: '#ff9800',
        brandText: '小米',
        name: '小米京东自营旗舰店',
        desc: '您的订单已发货，感谢您的支持！',
        time: '2025/04/01',
        unread: 0,
      },
      {
        id: '7',
        avatar: '',
        brandColor: '#673ab7',
        brandText: '华为',
        name: '华为京东自营旗舰店',
        desc: '新品手机已上架，欢迎选购。',
        time: '2025/03/28',
        unread: 0,
      },
      {
        id: '8',
        avatar: '',
        brandColor: '#e53935',
        brandText: '苏宁',
        name: '苏宁易购自营旗舰店',
        desc: '您的售后服务已受理，请耐心等待。',
        time: '2025/03/20',
        unread: 0,
      },
      {
        id: '9',
        avatar: '',
        brandColor: '#009688',
        brandText: 'OPPO',
        name: 'OPPO京东自营旗舰店',
        desc: '感谢您的咨询，祝您生活愉快！',
        time: '2025/03/15',
        unread: 0,
      },
      {
        id: '10',
        avatar: '',
        brandColor: '#607d8b',
        brandText: 'VIVO',
        name: 'VIVO京东自营旗舰店',
        desc: '新品上市，欢迎选购。',
        time: '2025/03/10',
        unread: 0,
      },
    ],
  },
]

const logisticsMessages = [
  {
    title: '',
    messages: [
      {
        id: 'l1',
        avatar: '',
        brandColor: '#2196f3',
        brandText: '京东物流',
        name: '京东物流',
        desc: '您的包裹已到达配送站，正在派送中。',
        time: '2025/05/16',
        unread: 1,
      },
    ],
  },
]

const remindMessages = [
  {
    title: '',
    messages: [
      {
        id: 'r1',
        avatar: '',
        brandColor: '#ffb300',
        brandText: '提醒',
        name: '系统提醒',
        desc: '您有一条待处理的售后服务。',
        time: '2025/05/15',
        unread: 0,
      },
    ],
  },
]

const couponMessages = [
  {
    title: '',
    messages: [
      {
        id: 'c1',
        avatar: '',
        brandColor: '#ff7043',
        brandText: '优惠',
        name: '优惠券中心',
        desc: '您有一张26.18元京东购物无门槛券待领取。',
        time: '2025/05/15',
        unread: 1,
      },
    ],
  },
]

const interactionMessages = [
  {
    title: '',
    messages: [
      {
        id: 'i1',
        avatar: '',
        brandColor: '#8e24aa',
        brandText: '互动',
        name: '互动消息',
        desc: '您有新的评论回复。',
        time: '2025/05/15',
        unread: 1,
      },
    ],
  },
]

const tabMessageMap = {
  customer: customerMessages,
  logistics: logisticsMessages,
  remind: remindMessages,
  coupon: couponMessages,
  interaction: interactionMessages,
}

export default function Service() {
  const [activeTab, setActiveTab] = useState('customer')
  const messageGroups = tabMessageMap[activeTab]

  return (
    <View className='service-container'>
      {/* 顶部标题栏 */}
      <View className='service-header'>
        <Text className='service-title'>消息</Text>
        <View className='service-header-icons'>
          <View className='service-header-dot'></View>
          <View className='service-header-more'>···</View>
        </View>
      </View>
      {/* 功能Tab栏 */}
      <View className='service-func-tabs'>
        {tabs.map(tab => (
          <View
            className={`service-func-tab${activeTab === tab.key ? ' active' : ''}`}
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
          >
            <View className='service-func-icon-box'>
              <Image className='service-func-icon' src={tab.icon} />
              {tab.badge && <View className='service-func-badge'>{tab.badge}</View>}
            </View>
            <Text className='service-func-label'>{tab.label}</Text>
            {tab.desc && <Text className='service-func-desc'>{tab.desc}</Text>}
          </View>
        ))}
      </View>
      {/* 消息分组与列表 */}
      <View className='service-msg-group-list'>
        {messageGroups.map(group => (
          <View key={group.title || 'main'}>
            {group.title && (
              <View className='service-msg-group-title'>
                <Text>{group.title}</Text>
                <View className='service-msg-group-count'>{group.messages.length}</View>
              </View>
            )}
            {group.messages.map(msg => (
              <View className='service-msg-item' key={msg.id}>
                {msg.avatar ? (
                  <Image className='service-msg-avatar' src={msg.avatar} />
                ) : msg.brandImg ? (
                  <Image className='service-msg-avatar' src={msg.brandImg} style={{ background: '#fff' }} />
                ) : (
                  <View className='service-msg-avatar' style={{ background: msg.brandColor }}>{msg.brandText}</View>
                )}
                <View className='service-msg-info'>
                  <View className='service-msg-row'>
                    <Text className='service-msg-name'>{msg.name}</Text>
                    {msg.official && <Text className='service-msg-official'>官方</Text>}
                    <Text className='service-msg-time'>{msg.time}</Text>
                  </View>
                  <View className='service-msg-row'>
                    <Text className='service-msg-desc'>{msg.desc}</Text>
                    {msg.unread > 0 && <View className='service-msg-unread'>{msg.unread}</View>}
                  </View>
                </View>
              </View>
            ))}
          </View>
        ))}
      </View>
      <TabBar />
    </View>
  )
}
